<script setup lang="ts">
  import { ref } from 'vue';
  import { getCrdaList, delectCrda } from '@/api/archives';
  import { TableInstance, Message } from '@arco-design/web-vue';
  import Edit from './edit/index.vue';
  import Add from './add/index.vue';
  import { useUserStore } from '@/store';

  defineOptions({
    name: 'crdaList',
  });
  const proTableRef = ref<TableInstance | null>(null);
  const userStore = useUserStore();
  console.log(userStore.allUserInfo);
  // 表单类型
  const formType = ref([
    {
      name: 'room_number',
      label: '档案室编号',
      type: 'a-input',
      fieldProps: {
        span: 8,
      },
    },
    {
      name: 'room_name',
      label: '档案室名称',
      type: 'a-input',
      fieldProps: {
        span: 8,
      },
    },
    {
      name: 'room_org_id',
      label: '所属单位',
      type: 'a-select',
      fieldProps: {
        span: 8,
        allowSearch: true,
        fieldNames: { value: 'org_id', label: 'org_name' },
      },
      selectOptions: userStore.allOrgList,
    },
    {
      name: 'room_create_user_id',
      label: '创建人',
      type: 'a-select',
      fieldProps: {
        span: 8,
        allowSearch: true,
        fieldNames: { value: 'user_id', label: 'user_name' },
      },
      selectOptions: userStore.allUserInfo,
    },
  ]);

  const isEdit = ref(false);
  const visible1 = ref(false);
  const editParam = ref();
  //表格类型
  const tableType = [
    {
      dataIndex: 'room_id',
      slotName: 'id',
    },
    {
      title: '档案室编号',
      dataIndex: 'room_number',
    },
    {
      title: '档案室名称',
      dataIndex: 'room_name',
    },
    {
      title: '位置',
      dataIndex: 'room_address',
    },
    {
      title: '所属单位',
      dataIndex: 'room_org_name',
    },
    {
      title: '创建人',
      dataIndex: 'room_create_user_name',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
    },
    {
      title: '操作',
      width: 130,
      fixed: 'right',
      slotName: 'operations',
      menus: [
        {
          name: '编辑',
          onClick: (record: any) => {
            visible1.value = true;
            editParam.value = record.room_id;
          },
        },
        {
          name: '删除',
          onClick: (record: any) => {
            delectCrda({
              room_ids: [record.room_id],
            }).then((res) => {
              proTableRef.value?.setRefresh();
              Message.success('删除成功！');
            });
          },
        },
      ],
    },
  ];
  const visible = ref(false);

  async function request(params) {
    const res = await getCrdaList(params);
    return {
      data: res.data,
    };
  }
</script>
<template>
  <div class="container">
    <pro-table
      ref="proTableRef"
      :formType="formType"
      title="档案室列表"
      :request="request"
      :tableType="tableType"
    >
      <template #btns>
        <a-button
          type="primary"
          @click="
            () => {
              isEdit = false;
              visible = true;
            }
          "
        >
          <template #icon>
            <icon-plus />
          </template>
          添加档案室
        </a-button>
      </template>
      <template #options>
        <add
          v-if="visible"
          v-model:visible="visible"
          @refresh="
            () => {
              $refs?.proTableRef?.setRefresh();
            }
          "
        />
        <edit
          v-if="visible1"
          v-model:visible="visible1"
          :editParam="editParam"
          @refresh="
            () => {
              $refs.proTableRef.setRefresh();
            }
          "
        />
      </template>
    </pro-table>
  </div>
</template>

<style scoped lang="less"></style>
